<template>
	<div class="content-limit">
		<van-overlay :show="show">
			<img src="/static/images/common/wx.png" style="width:100%;" />
		</van-overlay>
		<div class="content-center">
			<van-image class="logo_background" src="https://360dkw.oss-accelerate.aliyuncs.com/h5/logo_tow.png" />
			<van-form @submit="onSubmit" class="form-content-limit">
				<span class="login-type-title">短信登录</span>
				<van-field v-model="phone" label="手机号" placeholder="请输入手机号" />
				<van-field v-model="code" label="验证码" center clearable placeholder="请输入验证码">
					<van-button slot="button" size="small" type="info" native-type="button" round @click="sendCode()">
						{{sendCodeButtonContent}}
					</van-button>
				</van-field>
				<van-button round block type="info" native-type="submit" class="login_button_content_limit">
					登录
				</van-button>
			</van-form>
		</div>
	</div>
</template>
<script>
	import Vue from 'vue';
	import 'vant/lib/index.css'
	import {
		Image as VanImage,
		Form,
		Button,
		Field,
		Toast,
		Overlay
	} from 'vant';
	Vue.use(VanImage);
	Vue.use(Form);
	Vue.use(Button);
	Vue.use(Field);
	Vue.use(Toast);
	Vue.use(Overlay);
	export default {
		data() {
			return {
				show: false,
				sendCodeButtonContent: '发送验证码',
				phone: '',
				code: '',
			}
		},
		mounted() {
			var ua = navigator.userAgent;
			var isWeixin = !!/MicroMessenger/i.test(ua);
			this.show = isWeixin;
		},
		methods: {
			onSubmit(values) {
				var _this = this;
				if (!(/^1\d{10}$/.test(_this.phone))) {
					Toast('请输入正确的手机号');
					return false;
				}
				if (!(/\d{4}$/.test(_this.code))) {
					Toast('请输入正确的验证码');
					return false;
				}
				Toast.loading({
					duration: 0,
					message: '请求登录中...',
				});
				_this.$axios.post('/login?platform=3', {
						main_channel: 1,
						t: _this.$get_time(),
						app_version: '1.0',
						phone: _this.phone,
						code: _this.code,
						type: 1
					})
					.then((res) => {
						//手动关闭上面的Loading
						Toast.clear();
						if (res.code == 200) {
							Toast.success(res.data.is_new == 1 ? '注册成功' : '欢迎回来');
							// 基础参数写入缓存
							localStorage.setItem("userId", res.data.user_id);
							localStorage.setItem("phone", _this.phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2"));
							// 跳转链接
							window.location.href = '/#/index';
						} else {
							Toast.fail(res.msg);
						}
					})
			},
			sendCode() {
				var _this = this;
				if (!(/^1\d{10}$/.test(_this.phone))) {
					Toast('请输入正确的手机号');
					return false;
				}
				if (_this.sendCodeButtonContent == '发送验证码') {
					Toast.loading({
						duration: 0,
						message: '请求发送验证码中...',
					});
					_this.$axios.post('/send.code?platform=3', {
							main_channel: 1,
							t: _this.$get_time(),
							app_version: '1.0',
							phone: _this.phone,
							type: 1
						})
						.then((res) => {
							//手动关闭上面的Loading
							Toast.clear();
							if (res.code == 200) {
								Toast.success(res.msg);
								var time = 60,
									t = setInterval(() => {
										if (time > 0) {
											time--;
											_this.sendCodeButtonContent = time + 's'
										} else {
											_this.sendCodeButtonContent = '发送验证码'
											clearInterval(t);
										}
									}, 1000)
							} else {
								Toast.fail(res.msg);
							}
						})

				} else {
					Toast(_this.sendCodeButtonContent.replace("s", "秒") + '可以重新获取验证码');
					return false;
				}
			}
		}
	}
</script>
<style type="text/css">
	html,
	body,
	#app,
	.content-limit {
		height: 100%;
		background: #e67847;
	}

	.login-type-title {
		font-size: 14px;
		font-weight: bold;
		color: #f76f35;
		padding: 2.5vh 0;
		display: block;
	}

	.content-center {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -65%);
		width: 100%;
		text-align: center;
	}

	.logo_background>.van-image__img {
		width: 18vw;
		height: 18vw;
		margin: 0 auto 3vh;
		border-radius: 50%;
		overflow: hidden;
	}

	.form-content-limit {
		width: 90%;
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin: 0 auto;
	}

	.login_button_content_limit {
		width: 85%;
		margin: 0 auto 4vh;
		height: 30px;
		background-color: #f76f35;
		border-color: #f76f35;
	}

	.icon {
		width: 30px;
		display: block;
		margin: 0 auto 5px;
	}

	.van-cell {
		background: #f8f8f8;
		margin: 0 auto 2vh;
		width: 90%;
		border-radius: 50px;
		padding: 0 10px;
		line-height: 35px;
	}

	.van-tabbar-item__text {
		margin-bottom: 10px;
	}
	.van-field__label{
		width: 50px;
	}
	.van-button--small {
		height: 30px;
		background-color: #f76f35;
		border-color: #f76f35;
	}
</style>
